import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = createRouter({
  // 将起始地址设置为 /
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      // 布局页
      path: '/',
      component: () => import("../views/Layout/index.vue"),
      redirect: '/datadisplay',
      // 配置二级页面
      children: [
        {
          // 文章管理
          path: 'article',
          component: () => import("../views/Article/index.vue")
        }, 
        {
          // 数据看板
          path: "datadisplay",
          component: () => import("../views/DataDisplay/index.vue")
        }
      ]
    },
    {
      // 登录页
      path: '/login',
      component: () => import("../views/Login/index.vue")
    }
  ],
})

// 路由前置守卫
// 1.跳转白名单-无需登录即可访问
const whiteList = ['/login']
// 2.制定路由跳转规则
router.beforeEach((to, from) => {
  // 3.创建pinia仓库实例，用于获取token
  // -- 由于路由的挂载事件比pinia早，若是将pinia写在外面，会导致其未定义
  const userStore = useUserStore()
  if(!userStore.token) {
    //未登录,仅可访问白名单路由
    if(whiteList.includes(to.path)) {
      return true;
    } else {
      // 如果未登录去访问其他路由，需要重定向至登录页，登陆成功后再回跳
      return `/login?comebackUrl=${to.path}`
    }
  } else {
    // 已登录，不可访问登录页
    if(to.path === '/login') {
      return '/'
    } else {
      return true
    }
  }
})

export default router
